<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- th:text="${变量名}"  Thymeleaf 模板引擎中的一种语法，后台只需要传递一个名字叫
    pageTitle 的 json 字符串 {"pageTitle":"智能客服"} 前端就会使用后端传递回来的数据-->
    <title th:text="${pageTitle}"></title>
    <link href="/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/bootstrap/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/common/layout.css" rel="stylesheet">
</head>
<body>
    <!-- 导航条 -->
    <nav class="sidebar">
        <div class="sidebar-logo">
            <img src="/images/logo.png" alt="叩丁狼Logo">
        </div>
        <div class="sidebar-sticky">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="/chat" th:classappend="${currentPath == '/chat'} ? 'active'">
                        <i class="bi bi-chat-dots"></i> 智能客服
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/document" th:classappend="${currentPath == '/document'} ? 'active'">
                        <i class="bi bi-book"></i> 知识库
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- header 头部部分 -->
    <header class="header">
        <h1 th:text="${pageTitle}"></h1>
        <a href="#" class="logout-btn" onclick="logout()">
            <i class="bi bi-box-arrow-right"></i> 退出登录
        </a>
    </header>
    <!-- 主体部分 -->
    <main class="main-content">
        <!-- th:replace 替换  = ${content} 后台传递的数据   -->
        <div th:replace="${content}"></div>
    </main>

    <script src="/js/common/layout.js"></script>
</body>
</html>